<script lang="ts" setup>
import { onMounted, ref, useTemplateRef } from 'vue';
import { Menu, type MenuOpenChangeDetails } from '@ark-ui/vue/menu';
import { Switch } from '@ark-ui/vue/switch';
import { useI18n } from 'vue-i18n';
import { useAppStore } from '@/mobile/stores/app';
import { setLanguageFromClient } from '@/common/utils/language';
import { gotoLoginForClient, gotoLogoutForClient } from '@/common/utils/auth';

const atomgitUrl = import.meta.env.VITE_ATOMGIT_URL;

const appStore = useAppStore();
const { locale } = useI18n();
const mask = ref(false);

const login = async () => {
  gotoLoginForClient();
}

const logout = () => {
  gotoLogoutForClient();
}

const languageValue = ref(locale.value === 'zh-CN');

const changeLanguage = ({ checked }: { checked: boolean }) => {
  setLanguageFromClient(checked ? 'zh-CN' : 'en-US');
  window.location.reload();
}

const onMenuOpenChange = (status: MenuOpenChangeDetails) => {
  mask.value = status.open;
}

const elRef = useTemplateRef('el');
const parentEl = ref<HTMLElement | null | undefined>();

onMounted(() => {
  parentEl.value = elRef.value?.parentElement?.parentElement;
});
</script>

<template>
  <section class="page-header-avatar flex flex-shrink-0 items-stretch" v-bind="$attrs" ref="el">
    <Menu.Root close-on-select lazy-mount as-child :positioning="{ placement: 'bottom-end', gutter: 0, shift: 0 }" @open-change="onMenuOpenChange" v-if="appStore.user.id">
      <div class="relative z-0 flex">
        <Menu.Trigger class="bg-transparent px-10 focus-visible:outline-unset">
          <img :src="appStore.user.photo" class="block size-24 rounded-50% object-cover" :alt="appStore.user.username">
        </Menu.Trigger>
        <Menu.Positioner class="ml-10">
          <div class="mt--1 flex font-medium">
            <div>
              <Menu.Content as-child>
                <div class="max-h-[calc(100vh_-_48px-env(safe-area-inset-bottom))] overflow-auto border-width-1 border-#F7F7F7 rounded-bl-4 rounded-tl-4 bg-white py-8 shadow-[0_6px_10px_0_rgba(0,0,0,0.05)] focus-visible:outline-unset">
                  <Menu.Item as-child value="user-info" :close-on-select="false">
                    <div class="px-20 pb-4 text-center">
                      <p class="font-medium leading-20">{{ appStore.user.nickname }}</p>
                      <p class="text-12 leading-20">@{{ appStore.user.username }}</p>
                    </div>
                  </Menu.Item>
                  <Menu.Separator as-child>
                    <hr class="my-8 b-color-gray-2">
                  </Menu.Separator>
                  <Menu.Item as-child value="language" :close-on-select="false">
                    <div class="h-44 flex-y-center gap-x-6 px-20 data-[highlighted]:(rounded-4 bg-gray-2)">
                      <div>{{ $t('common.languageName', '', { locale: 'zh-CN' }) }}</div>
                      <Switch.Root v-model:checked="languageValue" id="page-header-switch-language" class="mt-2 block" @checked-change="changeLanguage">
                        <Switch.Control class="flex-shark-0 block h-16 w-28 flex-y-center cursor-pointer rounded-full bg-gray-3 p-2 transition-background-color data-[state=checked]:(bg-primary-2)">
                          <Switch.Thumb class="block h-12 w-12 translate-x-100% rounded-full bg-white transition-transform data-[state=checked]:(translate-x-0)" />
                        </Switch.Control>
                        <Switch.HiddenInput as-child>
                          <input type="checkbox">
                        </Switch.HiddenInput>
                      </Switch.Root>
                      <div>{{ $t('common.languageName', '', { locale: 'en-US' }) }}</div>
                    </div>
                  </Menu.Item>
                  <Menu.Item as-child value="my-homepage">
                    <a :href="`${atomgitUrl}/${appStore.user.username}`" target="_blank" class="block px-20 text-center leading-44">
                      {{ $t('common.header.user.menu1') }}
                    </a>
                  </Menu.Item>
                  <Menu.Item as-child value="my-repository">
                    <a :href="`${atomgitUrl}/users/${appStore.user.username}/projects`" target="_blank" class="block px-20 text-center leading-44">
                      {{ $t('common.header.user.menu2') }}
                    </a>
                  </Menu.Item>
                  <Menu.Item as-child value="my-organization">
                    <a :href="`${atomgitUrl}/-/profile/orgs`" target="_blank" class="block px-20 text-center leading-44">
                      {{ $t('common.header.user.menu3') }}
                    </a>
                  </Menu.Item>
                  <Menu.Item as-child value="my-changes">
                    <a :href="`${atomgitUrl}/dashboard/changes`" target="_blank" class="block px-20 text-center leading-44">
                      {{ $t('common.header.user.menu4') }}
                    </a>
                  </Menu.Item>
                  <Menu.Item as-child value="my-issues">
                    <a :href="`${atomgitUrl}/dashboard/issues`" target="_blank" class="block px-20 text-center leading-44">
                      {{ $t('common.header.user.menu5') }}
                    </a>
                  </Menu.Item>
                  <Menu.Item as-child value="my-starred">
                    <a :href="`${atomgitUrl}/users/${appStore.user.username}/starred`" target="_blank" class="block px-20 text-center leading-44">
                      {{ $t('common.header.user.menu6') }}
                    </a>
                  </Menu.Item>
                  <Menu.Item as-child value="my-profile">
                    <a :href="`${atomgitUrl}/-/profile`" target="_blank" class="block px-20 text-center leading-44">
                      {{ $t('common.header.user.menu7') }}
                    </a>
                  </Menu.Item>
                  <Menu.Separator as-child>
                    <hr class="my-8 b-color-gray-2">
                  </Menu.Separator>
                  <Menu.Item as-child value="help">
                    <a href="https://docs.atomgit.com/" target="_blank" class="block px-20 text-center leading-44">
                      {{ $t('common.header.user.menu9') }}
                    </a>
                  </Menu.Item>
                  <Menu.Item as-child value="logout">
                    <button type="button" class="block h-44 w-full bg-transparent px-20" @click="logout">
                      {{ $t('common.header.user.menu10') }}
                    </button>
                  </Menu.Item>
                </div>
              </Menu.Content>
            </div>
          </div>
        </Menu.Positioner>
      </div>
    </Menu.Root>

    <button type="button" class="bg-transparent px-10" @click="login" v-else>
      <div class="i-icons:default-avatar size-24"></div>
    </button>
  </section>

  <Teleport defer :to="parentEl" v-if="parentEl">
    <Transition
      enter-active-class="transition-opacity"
      leave-active-class="transition-opacity"
      enter-from-class="opacity-0"
      leave-to-class="opacity-0"
    >
      <div class="fixed bottom-0 left-0 right-0 top-0 z-90 bg-[rgba(0,0,0,0.20)]" v-if="mask"></div>
    </Transition>
  </Teleport>
</template>

<style lang="scss" scoped>
.page-header-avatar {
  [data-scope=menu][data-part=content][hidden] {
    display: none;
  }

  [data-scope=menu][data-part=content][data-state=open] {
    animation: fadeIn 0.15s ease-out;
  }

  [data-scope=menu][data-part=content][data-state=closed] {
    animation: fadeOut 0.1s ease-out;
  }

  @keyframes fadeIn {
    from {
      max-height: 0;
      opacity: 0;
    }

    to {
      max-height: 100%;
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      max-height: 100%;
      opacity: 1;
    }

    to {
      max-height: 0;
      opacity: 0;
    }
  }
}
</style>
